<template>
	<view style="height: 300rpx;"><qiun-data-charts :opts="opt" type="pie" :chartData="chartData" background="none" /></view>
</template>

<script>
export default {
	data() {
		return {
			chartData: {
				series: [
					{
						name: '单位统计',
						data: [{ value: 13, name: '全部' }, { value: 23, name: '建设' }, { value: 13, name: '施工' }, { value: 18, name: '其他' }]
					}
				]
			}
		};
	},
	props: {
		companies: {
			type: Array | Object,
			default() {
				return null;
			}
		}
	},
	created() {
		this.init();
	},
	watch: {
		companies(n) {
			this.init();
		}
	},
	methods: {
		init() {
			if (this.companies) {
				let chartData = {
					series: [
						{
							data: this.companies.map(e => {
								return {
									name: e.name,
									value: e.value
								};
							})
						}
					]
				};
				this.chartData = chartData;
			} else {
				this.chartData = {};
				console.error('首页统计图', '项目情况无数据');
			}
		}
	},
	computed: {
		opt() {
			return {
				type: 'pie',
				color: ['#13A4FE', '#A995FB', '#FFB61D', '#21E5F3', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [0, 0, 0, 0],
				rotate: false,
				errorReload: true,
				fontSize: 9,
				fontColor: '#666666',
				enableScroll: false,
				touchMoveLimit: 60,
				enableMarkLine: false,
				dataLabel: true,
				dataPointShape: true,
				dataPointShapeType: 'solid',
				tapLegend: true,
				legend: {
					show: true,
					position: 'left',
					padding: 0,
					margin: 0,
					backgroundColor: 'rgba(0,0,0,0)',
					borderColor: 'rgba(0,0,0,0)',
					borderWidth: 0,
					fontSize: 13,
					fontColor: '#666666',
					lineHeight: 30,
					hiddenColor: '#CECECE',
					itemGap: 0
				},
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 2,
						offsetAngle: 0,
						customRadius: 0,
						labelWidth: 5,
						border: true,
						borderWidth: 1,
						borderColor: '#FFFFFF',
						linearType: 'none'
					},
					tooltip: {
						showBox: true,
						showArrow: true,
						showCategory: false,
						borderWidth: 0,
						borderRadius: 0,
						borderColor: '#000000',
						borderOpacity: 0.7,
						bgColor: '#000000',
						bgOpacity: 0.7,
						gridType: 'solid',
						dashLength: 4,
						gridColor: '#CCCCCC',
						fontColor: '#FFFFFF',
						splitLine: true,
						horizentalLine: false,
						xAxisLabel: false,
						yAxisLabel: false,
						labelBgColor: '#FFFFFF',
						labelBgOpacity: 0.7,
						labelFontColor: '#666666'
					}
				}
			};
		}
	}
};
</script>

<style></style>
